feat(ui): add css :target deeplinks to CodeTabs - #9144
Conversation
Replace Radix tabs in CodeTabs with a pure HTML/CSS implementation so URL fragments select a tab via :target without hash event listeners.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
avivkeller
left a comment
There was a problem hiding this comment.
This is an extremely complex, likely AI-generated fix for an almost nonexistent issue. If there is a valid resolution to the issue, it should be as simple as a <a/> anchor component, or similar, and not rely on a bunch of JavaScript majorly changing our current implementation.
Please note Node.js's AI Policy.
Yeah, I mean we appreciate the effort, but the PR contents differ from the title, anyways this is not an easy solution for a newcomer unfortunately, now that we're considering the path of simplifying the component as described on #9140. |
|
Thanks @avivkeller and @ovflowd for the review. Agreed this went past a simple |
Implements deep linking for
CodeTabswith pure HTML/CSS, following @ovflowd’s direction on #9140. Radix Tabs are no longer used for this component; tab switching is fragment links and:target.Clicking a tab is an
<a href="#id">, so the URL updates natively. Loading/path#idselects that tab via CSS. Nohashchangelisteners.How
:targetworks<a id="…" href="#…">.:targetstyles the active trigger.:has(.trigger:nth-child(n):target).CodeTabsinstance does not contain the current fragment (no hash, unmatched hash, or another group’s tab),[data-default](first tab, ordefaultTab/defaultValue) is shown.ID scheme
groupId{slug(groupId)}-{slug(tabKey)}e.g.install-js-0groupId)codetabs-{useId}-{slug(tabKey)}e.g.codetabs-r1-js-0MDX already uses
tabKey={language}-{index}.useIdmakes multiple CodeTabs on one page unique. Authors can passgroupIdfor stable permalinks.Common/Tabsis unchanged and still uses Radix.Validation
@node-core/ui-componentsunit tests: initial#idselects the right tab, clicks updatelocation.hash, hash navigation between tabs, unmatched hash keeps the default, two CodeTabs on one page do not collide.pnpm --filter @node-core/ui-components test:unitpassing (60 tests).lint:js,lint:css, andlint:typespassing.Fixes #9140
Check List
pnpm formatto ensure the code follows the style guide.@node-core/ui-componentsunit tests).pnpm buildto check if the website builds without errors.